<template>
  <el-form class="list-b-12 p-12 m-8 bg-color-white" :model="dataInfo.form" label-width="auto" ref="ruleFormRef"
    @submit.prevent="">
    <ElFormItemBox label="复制内容">
      {{ data.copy || '--' }}
    </ElFormItemBox>
    <el-divider border-style="dashed" />
    <ElFormItemBox label="英文字母全部大写">
      <CopyBox data="proxy.$toUpperCase(data)" @copyBtn="copyBtn">
        {{ proxy.$toUpperCase(data.originalText) }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="英文字母全部小写">
      <CopyBox data="proxy.$toLowerCase(data)" @copyBtn="copyBtn">
        {{ proxy.$toLowerCase(data.originalText) }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="英文字母小驼峰">
      <CopyBox data="proxy.$toCamelCase(data)" @copyBtn="copyBtn">
        {{ proxy.$toCamelCase(data.originalText) }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="英文字母大驼峰">
      <CopyBox data="proxy.$toPascalCase(data)" @copyBtn="copyBtn">
        {{ proxy.$toPascalCase(data.originalText) }}
      </CopyBox>
    </ElFormItemBox>
    <el-divider border-style="dashed" />
    <ElFormItemBox label="税率">
      <CopyBox data="proxy.$taxRate(data)" @copyBtn="copyBtn">
        <ElNumberBox :data="data.tax" dataName="taxRate" @changeBtn="proxy.$taxRate(data.tax)" :width="200" />
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="数量">
      <CopyBox data="proxy.$taxQuantity(data)" @copyBtn="copyBtn">
        <ElNumberBox :data="data.tax" dataName="quantity" @changeBtn="proxy.$taxQuantity(data.tax)" :width="200" />
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="未税单价">
      <CopyBox data="proxy.$taxExclusiveUnitPrice(data)" @copyBtn="copyBtn">
        <ElNumberBox :data="data.tax" dataName="taxExclusiveUnitPrice"
          @changeBtn="proxy.$taxExclusiveUnitPrice(data.tax)" :width="200" />
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="含税单价">
      <CopyBox data="proxy.$taxInclusiveUnitPrice(data)" @copyBtn="copyBtn">
        <ElNumberBox :data="data.tax" dataName="taxInclusiveUnitPrice"
          @changeBtn="proxy.$taxInclusiveUnitPrice(data.tax)" :width="200" />
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="未税总价">
      <CopyBox data="proxy.$taxExclusiveTotalPrice(data)" @copyBtn="copyBtn">
        <ElNumberBox :data="data.tax" dataName="taxExclusiveTotalPrice"
          @changeBtn="proxy.$taxExclusiveTotalPrice(data.tax)" :width="200" />
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="含税总价">
      <CopyBox data="proxy.$taxInclusiveTotalPrice(data)" @copyBtn="copyBtn">
        <ElNumberBox :data="data.tax" dataName="taxInclusiveTotalPrice"
          @changeBtn="proxy.$taxInclusiveTotalPrice(data.tax)" :width="200" />
      </CopyBox>
    </ElFormItemBox>
    <el-divider border-style="dashed" />
    <ElFormItemBox label="公式计算">
      <CopyBox data="proxy.$count('(100+1)/3', 2)" @copyBtn="copyBtn">
        <div>{{ `原始公式：${data.count}` }}</div>
        <div>{{ `四舍五入：${proxy.$count(data.count, 2, true)}` }}</div>
        <div>{{ `截断：${proxy.$count(data.count, 2)}` }}</div>
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="金钱格式">
      <CopyBox data="proxy.$money(123)" @copyBtn="copyBtn">
        {{ proxy.$money(data.number) }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="千位分隔符">
      <CopyBox data="proxy.$toLocaleString(data)" @copyBtn="copyBtn">
        {{ proxy.$toLocaleString(data.number) }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="数字转大写">
      <CopyBox data="proxy.$chineseNumber(123)" @copyBtn="copyBtn">
        {{ proxy.$chineseNumber(data.number) }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="mm转px">
      <CopyBox data="proxy.$mmToPx(210)" @copyBtn="copyBtn">
        210mm等于{{ proxy.$mmToPx(210) }}px
      </CopyBox>
    </ElFormItemBox>
    <el-divider border-style="dashed" />
    <ElFormItemBox label="清除html标签信息">
      <CopyBox data="proxy.$stripHtmlTags(data)" @copyBtn="copyBtn">
        {{ proxy.$stripHtmlTags(data.div) }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="还原信息">
      <CopyBox data="proxy.$decodeHtmlEntities(data)" @copyBtn="copyBtn">
        {{ proxy.$decodeHtmlEntities(data.div) }}
      </CopyBox>
    </ElFormItemBox>
    <el-divider border-style="dashed" />
    <ElFormItemBox label="日期格式">
      <CopyBox data="proxy.$day(new Date())" @copyBtn="copyBtn">
        {{ proxy.$day(new Date()) }} {{ proxy.$getDayName() }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="相差天数">
      <CopyBox data="proxy.$getDaysUntilDeadline ('2025-4-10')" @copyBtn="copyBtn">
        {{ proxy.$getDaysUntilDeadline('2025-4-10').dayDiffText }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="前三天日期">
      <CopyBox data="proxy.$getTimeAgo(3)" @copyBtn="copyBtn">
        {{ proxy.$getTimeAgo(3) }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="前1个月日期">
      <CopyBox data="proxy.$getTimeAgo(1, 'months')" @copyBtn="copyBtn">
        {{ proxy.$getTimeAgo(1, 'months') }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="前1个年日期">
      <CopyBox data="proxy.$getTimeAgo(1, 'years')" @copyBtn="copyBtn">
        {{ proxy.$getTimeAgo(1, 'years') }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="上周一日期">
      <CopyBox data="proxy.$getTimeAgo(1, 'weeksStart')" @copyBtn="copyBtn">
        {{ proxy.$getTimeAgo(1, 'weeksStart') }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="上周日日期">
      <CopyBox data="proxy.$getTimeAgo(1, 'weeksEnd')" @copyBtn="copyBtn">
        {{ proxy.$getTimeAgo(1, 'weeksEnd') }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="时间格式">
      <CopyBox data="proxy.$time(new Date())" @copyBtn="copyBtn">
        {{ proxy.$time(new Date()) }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="相对时间">
      <CopyBox data="proxy.$getRelativeTime ('2025-04-16 12:00:00')" @copyBtn="copyBtn">
        {{ proxy.$getRelativeTime('2025-04-16 12:00:00') }}
      </CopyBox>
    </ElFormItemBox>
    <el-divider border-style="dashed" />
    <ElFormItemBox label="文本高亮">
      <CopyBox data="proxy.$highlightedText('欢迎光临', '欢迎', '#e13335')" @copyBtn="copyBtn">
        <div v-html="proxy.$highlightedText('欢迎光临', '欢迎', '#e13335')"></div>
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="是否是方法">
      <CopyBox data="proxy.$isFunction(fun)" @copyBtn="copyBtn">
        {{ proxy.$isFunction(fun) }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="提示">
      <CopyBox data="proxy.$message('操作成功')" @copyBtn="copyBtn">
        <el-button @click="proxy.$message('操作成功')">点击提示</el-button>
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="询问">
      <CopyBox data="proxy.$messageBox('是否删除当前参数', () => {
        proxy.$message('删除成功')
      })" @copyBtn="copyBtn">
        <el-button @click="proxy.$messageBox('是否删除当前参数', () => {
          proxy.$message('删除成功')
        })">点击询问</el-button>
      </CopyBox>
    </ElFormItemBox>
    <el-divider border-style="dashed" />
    <ElFormItemBox label="原始数据">
      <json-viewer :value="data" expanded :copyable="{
        copyText: '复制',
        copiedText: '复制成功',
      }" />
    </ElFormItemBox>

  </el-form>
</template>
<script setup lang="ts">
import { useListComponent } from './pageTs'; // 引入逻辑
const { dataInfo } = useListComponent();
import { reactive, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance() as any;
const data = reactive({
  tax: {
    taxRate: 0.13,//税率
    quantity: 100,//数量
    taxInclusiveUnitPrice: 113,//含税单价
    taxExclusiveUnitPrice: 100,//未税单价
    taxInclusiveTotalPrice: 11300,//含税总价
    taxExclusiveTotalPrice: 10000,//未税总价
    precision: 2,//精度
  },
  count: '(100+1)/3',
  originalText: 'Welcome everyone',
  number: 123456789.89,
  copy: '',
  hex: '#FFFFFF',
  cmyk: { "c": 0, "m": 73, "y": 100, "k": 0 },
  rgb: '',
  div: '&lt;div&gt;&lt;p&gt;这是一个包含&lt;p&gt;HTML&lt;/p&gt;标签的字符串。&lt;/p&gt;&lt;/div&gt;\n<span>12321</span>'
});
const ruleFormRef = ref<HTMLElement | null>(null);
const fun = (message: string = '操作成功') => {
  proxy.$message(message)
};
const copyBtn = (text: string) => {
  data.copy = text
};


onMounted(() => { });

onBeforeUnmount(() => { });
</script>